<template>
  <div class="content">
    <div class="consigneeInfo">
      <div class="title">
        <span>收货人信息</span>
      </div>
      <div class="consigneeInfoName">
        <p class="name">姓名：{{info.addressContact}}</p>
        <p class="phone">手机号：{{info.addressPhone}}</p>
      </div>
      <div class="consigneeInfoAdd">
        <span>{{info.province}}</span>
        <!-- <div>
            <img src="https://akk.028wkf.cn/kdb-weapp-img/img/ptxg.png" alt>
            <span>修改地址</span>
        </div>-->
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="refundInfo">
      <div class="title">
        <span>退款信息</span>
      </div>
      <div
        class="refundInfoCont"
        v-for="(item,index) in refundInfoList"
        :key="index"
      >
        <div class="infoContImg">
          <div>
            <img
              v-if="item.image1 === null ? false : true"
              :src="item.image1"
              alt
            />
            <img
              v-if="item.image2 === null ? false : true"
              :src="item.image2"
              alt
            />
            <img
              v-if="item.image3 === null ? false : true"
              :src="item.image3"
              alt
            />
          </div>
        </div>
        <div class="infoContTitle">
          <span>七天无理由退款</span>
          <p
            class="refundHint"
            v-if="item.state !== '0' ? true : false"
          >{{item.state === '3' ? '未退款' : item.state === '1' ? '处理中' :item.state === '2' ? '已退款' : '待处理'}}</p>
          <p
            class="refundBtn"
            @click="refundBtn(item.refundId)"
            v-if="item.state === '0' ? true : false"
          >确认退款</p>
        </div>
        <div class="infoContText">详情：{{item.reason}}</div>
        <div class="infoContText">备注：{{item.remark === '' ? '无' : item.remark}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { FIND_REFUND_PAGE_API, FIND_REFUND_RATIO, AGREE_REFUND } from '@/api'

export default {
  components: {},
  data () {
    return {
      info: {
        addressContact: '',
        addressPhone: '',
        province: ''
      },
      refundInfoList: []
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.getInfo()
  },
  created () {},
  methods: {
    getInfo () {
      const vm = this
      let info = JSON.parse(this.$root.$mp.query.info)
      vm.info.addressContact = info.addressContact
      vm.info.addressPhone = info.addressPhone
      vm.info.province = info.province
      vm._getRefundInfo(info.orderNo)
    }, // 得到传过来的信息
    refundBtn (refundId) {
      const vm = this
      vm._getServiceCharge(refundId)
    }, // 点击按钮
    _getServiceCharge (refundId) {
      const vm = this
      FIND_REFUND_RATIO(refundId, vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data > 0) {
              vm
                // .$dialog('退款手续费为：' + r.data.data + '元，是否继续', '')
                .$dialog('是否继续退款操作', '')
                .then(() => {
                  vm._getAgreeRefund(refundId, vm.account.shopId, r.data.data)
                })
            } else {
              vm.$dialog('是否继续退款操作', '').then(() => {
                vm._getAgreeRefund(refundId, vm.account.shopId, r.data.data)
              })
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 手续费请求
    _getAgreeRefund (refundId, shopId, refundFee) {
      const vm = this
      AGREE_REFUND(refundId, shopId, refundFee)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('退款成功', '').then(() => {
              vm.$router.replace('/pages/shop-management/shop-order/main')
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 这个才是真正的退款请求
    _getRefundInfo (orderNo) {
      const vm = this
      let params = {
        orderNo: orderNo,
        providerId: vm.account.providerId,
        shopId: vm.account.shopId
      }
      FIND_REFUND_PAGE_API(params, 1, 99)
        .then(r => {
          if (r.data.code === '0') {
            vm.refundInfoList = r.data.data.list
          }
        })
        .catch(e => {
          console.info(e)
        })
    } // 发退款info请求
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';
.content {
  width: 360px;
  margin: 100%;
  // 订单信息
  .consigneeInfo {
    width: calc(100% - 20px);
    margin: 10px auto;
    min-height: 80px;
    min-height: 150px;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);

    .title {
      font-size: 16px;
      line-height: 16px;
      padding-top: 30px;
      margin: 0 0 0 10px;
      span {
        padding-left: 5px;
        color: #5996f8;
        border-left: 5px solid #5996f8;
      }
    }
    .consigneeInfoName {
      width: 320px;
      margin: 10px auto 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 14px;
      .name {
        color: #000;
      }
      .phone {
        color: #5996f8;
      }
    }
    .consigneeInfoAdd {
      font-size: 14px;
      line-height: 14px;
      width: 320px;
      margin: 10px auto 0;
      position: relative;
      padding-bottom: 30px;
      span {
        line-height: 30px;
      }
      div {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
          margin-left: 8px;
        }
      }
    }
  }
  // 退款详情
  .refundInfo {
    width: 344px;
    margin: auto;
    position: relative;
    height: auto;
    padding-bottom: 20px;
    border-radius: 3px;
    border: 1px solid #dfe5f9;
    box-shadow: #dfe5f9 0 5px 40px 1px;
    // box-shadow: 0px -10px 0px 0px #dfe5f9, -10px 0px 0px 0px #dfe5f9,
    //   10px 0px 0px 0px #dfe5f9, 0px 10px 0px 0px #dfe5f9;
    .refundInfoBackground {
      position: absolute;
      top: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }
    .title {
      font-size: 16px;
      line-height: 16px;
      padding-top: 30px;
      // margin: 0 0 0 10px;
      span {
        line-height: 16px;
        padding-left: 5px;
        color: #5996f8;
        border-left: 5px solid #5996f8;
      }
    }
    .refundInfoCont {
      padding-bottom: 30px;
      .infoContImg {
        display: flex;
        flex-wrap: wrap;
        width: 340px;
        margin: 10px auto;
        div {
          img {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            margin-left: 10px;
          }
        }
      }
      .infoContTitle {
        width: 340px;
        margin: 5px auto 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          background: #f7352e;
          color: #fff;
          font-size: 10px;
          padding: 5px 10px;
          margin-left: 10px;
          border-radius: 25px;
        }
        .refundHint {
          font-size: 14px;
          color: #5996f8;
          margin-right: 10px;
        }
        .refundBtn {
          margin-right: 10px;
          font-size: 14px;
          padding: 5px 10px;
          border-radius: 2px;
          background: #f7352e;
          color: #fff;
        }
      }
      .infoContText {
        width: 320px;
        margin: auto;
        color: #6c6c6c;
        font-size: 14px;
        line-height: 24px;
      }
    }
  }
}
</style>
